<template>
  <div class="dashboard-container">
    <!-- 添加动态网格背景 -->
    <div class="grid-bg">
      <div class="grid"></div>
    </div>

    <!-- 添加光晕效果 -->
    <div class="glow-effects">
      <div class="glow-circle"></div>
      <div class="glow-line"></div>
    </div>

    <!-- 添加粒子动画背景 -->
    <div class="particles-container">
      <!-- 漂浮粒子 -->
      <div class="floating-particles">
        <div class="particle" v-for="n in 80" :key="'float-'+n"></div>
      </div>
      
      <!-- 连线粒子 -->
      <div class="connected-particles">
        <div class="particle" v-for="n in 30" :key="'connect-'+n"></div>
      </div>
      
      <!-- 流动粒子 -->
      <div class="flowing-particles">
        <div class="particle" v-for="n in 40" :key="'flow-'+n"></div>
      </div>
    </div>
    
    <!-- 添加动态装饰线 -->
    <div class="decoration-lines">
      <div class="line-h"></div>
      <div class="line-v"></div>
    </div>

    <!-- 顶部标题栏改造 -->
    <div class="dashboard-header">
      <div class="left-area">
        <div class="title-container">
          <div class="cyber-box">
            <div class="title-bg"></div>
            <span class="main-title">智慧停车管理平台</span>
            <div class="corner-decor"></div>
            <div class="running-line"></div>
          </div>
        </div>
      </div>
      <div class="center-area">
        <div class="weather-info">
          <i class="el-icon-sunny"></i>
          <span class="temp">{{ weather.temp }}℃</span>
          <span class="city">{{ weather.city }}</span>
          <span class="date">{{ dateInfo.date }}</span>
        </div>
      </div>
      <div class="right-area">
        <div class="time-info">
          <div class="time">{{ dateInfo.time }}</div>
          <div class="week">{{ dateInfo.week }}</div>
        </div>
      </div>
    </div>

    <!-- 数据总览卡片添加3D效果 -->
    <div class="overview-cards">
      <div 
        class="card cyber-card" 
        v-for="(item, index) in overviewData" 
        :key="index"
        :style="{ '--delay': index * 0.2 + 's' }"
      >
        <div class="card-content">
          <count-to
            :start-val="0"
            :end-val="item.value"
            :duration="2500"
            :decimals="item.decimals || 0"
            class="card-value"
            :prefix="item.prefix || ''"
          />
          <div class="card-title">{{ item.title }}</div>
          <div class="card-trend">
            <span :class="['trend', item.trend]">
              {{ item.rate }}
              <i :class="item.trend === 'up' ? 'el-icon-top' : 'el-icon-bottom'"></i>
            </span>
            <span class="compare">较昨日</span>
          </div>
        </div>
        <div class="card-icon" :style="{ background: item.iconBg }">
          <i :class="item.icon"></i>
        </div>
      </div>
    </div>

    <!-- 主要内容区域添加更多效果 -->
    <div class="main-content">
      <div class="left-panel">
        <div class="chart-card usage-card">
          <div class="border-box">
            <div class="border-corner-lt"></div>
            <div class="border-corner-rt"></div>
            <div class="border-corner-lb"></div>
            <div class="border-corner-rb"></div>
            <div class="card-header">
              <span class="title">停车场使用率</span>
              <div class="tabs">
                <span 
                  v-for="tab in usageTabs" 
                  :key="tab.key"
                  :class="['tab-item', { active: currentUsageTab === tab.key }]"
                  @click="handleUsageTabChange(tab.key)"
                >{{ tab.name }}</span>
              </div>
            </div>
            <div class="usage-chart" ref="usageChart"></div>
            <div class="chart-footer">
              <div class="indicator" v-for="(item, index) in usageIndicators" :key="index">
                <span class="dot" :style="{ background: item.color }"></span>
                <span class="label">{{ item.label }}</span>
                <span class="value">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="chart-card income-card">
          <div class="border-box">
            <div class="border-corner-lt"></div>
            <div class="border-corner-rt"></div>
            <div class="border-corner-lb"></div>
            <div class="border-corner-rb"></div>
            <div class="card-header">
              <span class="title">收入统计</span>
              <el-radio-group v-model="incomeTimeRange" size="mini">
                <el-radio-button label="day">今日</el-radio-button>
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
              </el-radio-group>
            </div>
            <div class="income-chart" ref="incomeChart"></div>
          </div>
        </div>
      </div>

      <div class="center-panel">
        <div class="map-container">
          <div class="map-header">
            <div class="title">停车场实时监控</div>
            <div class="view-control">
              <el-radio-group v-model="mapView" size="mini">
                <el-radio-button label="2D">2D视图</el-radio-button>
                <el-radio-button label="3D">3D视图</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="map-content" ref="parkingMap" id="container">
            <!-- 地图将在这里渲染 -->
          </div>
          <div class="map-overlay">
            <div class="parking-status">
              <div class="status-item" v-for="(item, index) in parkingStatus" :key="index">
                <div class="status-header">
                  <span class="name">{{ item.name }}</span>
                  <el-tag :type="item.status" size="mini">{{ item.statusText }}</el-tag>
                </div>
                <div class="status-info">
                  <span>总车位: {{ item.total }}</span>
                  <span class="available">空余: {{ item.available }}</span>
                </div>
                <el-progress 
                  :percentage="Math.floor((item.total - item.available) / item.total * 100)"
                  :color="item.color"
                  :stroke-width="8"
                >
                  <span class="progress-label">已停: {{ item.total - item.available }}</span>
                </el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="right-panel">
        <div class="chart-card monitor-card">
          <div class="border-box">
            <div class="border-corner-lt"></div>
            <div class="border-corner-rt"></div>
            <div class="border-corner-lb"></div>
            <div class="border-corner-rb"></div>
            <div class="card-header">
              <span class="title">实时监控</span>
              <el-button type="text" size="mini" @click="refreshMonitor">
                <i class="el-icon-refresh"></i>
                刷新
              </el-button>
            </div>
            <div class="monitor-list">
              <div 
                class="monitor-item" 
                v-for="(item, index) in monitorList" 
                :key="index"
                :class="{ warning: item.status === 'warning', error: item.status === 'error' }"
              >
                <div class="camera-info">
                  <i class="el-icon-video-camera"></i>
                  <span class="name">{{ item.name }}</span>
                </div>
                <div class="status-info">
                  <span class="time">{{ item.lastUpdate }}</span>
                  <span class="status" :class="item.status">{{ item.statusText }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="chart-card alert-card">
          <div class="border-box">
            <div class="border-corner-lt"></div>
            <div class="border-corner-rt"></div>
            <div class="border-corner-lb"></div>
            <div class="border-corner-rb"></div>
            <div class="card-header">
              <span class="title">告警信息</span>
              <div class="alert-stats">
                <span class="stat-item">
                  <span class="value">{{ alertStats.total }}</span>
                  <span class="label">总数</span>
                </span>
                <span class="stat-item">
                  <span class="value">{{ alertStats.unhandled }}</span>
                  <span class="label">待处理</span>
                </span>
              </div>
            </div>
            <div class="alert-list">
              <div 
                class="alert-item" 
                v-for="(item, index) in alertList" 
                :key="index"
                :class="item.level"
              >
                <div class="alert-time">{{ item.time }}</div>
                <div class="alert-content">
                  <div class="title">{{ item.title }}</div>
                  <div class="detail">{{ item.content }}</div>
                </div>
                <div class="alert-status">
                  <el-tag :type="item.level" size="mini">{{ item.levelText }}</el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import CountTo from 'vue-count-to'

export default {
  name: 'Index',
  components: {
    CountTo
  },
  data() {
    return {
      currentTime: '',
      timer: null,
      // 天气信息
      weather: {
        temp: 26,
        city: '深圳市',
        condition: 'sunny'
      },
      // 日期时间
      dateInfo: {
        date: '',
        time: ''
      },
      // 视图控制
      mapView: '3D',
      currentUsageTab: 'today',
      incomeTimeRange: 'day',
      
      // 数据总览
      overviewData: [
        { 
          title: '总车位数',
          value: 2500,
          icon: 'el-icon-s-grid',
          iconBg: 'linear-gradient(180deg, #1890FF 0%, #77B9FF 100%)',
          trend: 'up',
          rate: '2.5%'
        },
        { 
          title: '当前空位',
          value: 864,
          icon: 'el-icon-s-opportunity',
          iconBg: 'linear-gradient(180deg, #52C41A 0%, #95DE64 100%)',
          trend: 'down',
          rate: '1.8%'
        },
        { 
          title: '今日收入',
          value: 25630,
          prefix: '¥',
          decimals: 2,
          icon: 'el-icon-money',
          iconBg: 'linear-gradient(180deg, #FAAD14 0%, #FFD666 100%)',
          trend: 'up',
          rate: '12.5%'
        },
        { 
          title: '今日车流量',
          value: 3562,
          icon: 'el-icon-s-data',
          iconBg: 'linear-gradient(180deg, #722ED1 0%, #B37FEB 100%)',
          trend: 'up',
          rate: '5.2%'
        }
      ],
      
      // 使用率标签页
      usageTabs: [
        { key: 'today', name: '今日' },
        { key: 'week', name: '本周' },
        { key: 'month', name: '本月' }
      ],
      
      // 使用率指标
      usageIndicators: [
        { label: '平均使用率', value: '85.6%', color: '#1890FF' },
        { label: '高峰时段', value: '95.2%', color: '#52C41A' },
        { label: '低谷时段', value: '45.8%', color: '#FAAD14' }
      ],
      
      // 停车场状态
      parkingStatus: [
        {
          name: 'A区停车场',
          status: 'success',
          statusText: '运行正常',
          usage: 85,
          total: 500,
          available: 75,
          color: '#52C41A'
        },
        {
          name: 'B区停车场',
          status: 'warning',
          statusText: '即将满位',
          usage: 95,
          total: 300,
          available: 15,
          color: '#FAAD14'
        },
        {
          name: 'C区停车场',
          status: 'danger',
          statusText: '已满位',
          usage: 100,
          total: 200,
          available: 0,
          color: '#F5222D'
        }
      ],
      
      // 监控列表
      monitorList: [
        {
          name: '入口闸机A1',
          status: 'normal',
          statusText: '正常运行',
          lastUpdate: '2分钟前'
        },
        {
          name: '出口闸机B2',
          status: 'warning',
          statusText: '需要维护',
          lastUpdate: '5分钟前'
        },
        {
          name: '监控摄像头C3',
          status: 'error',
          statusText: '离线',
          lastUpdate: '10分钟前'
        }
      ],
      
      // 告警统计
      alertStats: {
        total: 24,
        unhandled: 5
      },
      
      // 告警列表
      alertList: [
        {
          time: '10:24:35',
          title: '设备告警',
          content: 'A区入口闸机故障',
          level: 'warning',
          levelText: '警告'
        },
        {
          time: '10:15:22',
          title: '容量告警',
          content: 'B区停车位即将满位',
          level: 'info',
          levelText: '提示'
        },
        {
          time: '10:02:15',
          title: '系统告警',
          content: '系统检测到异常访问',
          level: 'danger',
          levelText: '严重'
        }
      ],
      map: null,
      parkingLots: [
        {
          name: 'A区停车场',
          position: [114.057868, 22.543099],
          total: 500,
          available: 75
        },
        {
          name: 'B区停车场',
          position: [114.059868, 22.543099],
          total: 300,
          available: 15
        },
        {
          name: 'C区停车场',
          position: [114.058868, 22.542099],
          total: 200,
          available: 0
        }
      ]
    }
  },
  mounted() {
    this.updateTime()
    this.timer = setInterval(this.updateTime, 1000)
    // 延迟初始化地图，确保DOM已经渲染
    this.$nextTick(() => {
      this.initMap()
      this.initCharts()
    })
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString()
    },
    initCharts() {
      this.initUsageChart()
      this.initIncomeChart()
    },
    initUsageChart() {
      const chart = echarts.init(this.$refs.usageChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '06:00', '12:00', '18:00', '24:00'],
          axisLine: { lineStyle: { color: '#8392A5' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#8392A5' } },
          splitLine: { lineStyle: { color: '#061D33' } }
        },
        series: [{
          data: [30, 85, 95, 90, 45],
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: { color: '#00FFFF' },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0, 255, 255, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(0, 255, 255, 0)'
            }])
          }
        }]
      }
      chart.setOption(option)
    },
    initIncomeChart() {
      const chart = echarts.init(this.$refs.incomeChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: { lineStyle: { color: '#8392A5' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#8392A5' } },
          splitLine: { lineStyle: { color: '#061D33' } }
        },
        series: [{
          data: [15000, 18000, 22000, 20000, 25000, 30000, 28000],
          type: 'bar',
          barWidth: '60%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00FFFF'
            }, {
              offset: 1,
              color: '#0066FF'
            }])
          }
        }]
      }
      chart.setOption(option)
    },
    initMap() {
      try {
        this.map = new BMap.Map('container')
        const point = new BMap.Point(114.058868, 22.543099)
        this.map.centerAndZoom(point, 17)
        this.map.enableScrollWheelZoom()
        
        // 添加地图控件
        this.map.addControl(new BMap.NavigationControl())  // 添加平移缩放控件
        this.map.addControl(new BMap.ScaleControl())      // 添加比例尺控件
        
        // 初始化标记点
        this.handleViewChange()
        
        // 添加鼠标滚轮缩放监听
        this.map.addEventListener('zoomend', () => {
          // 根据缩放级别调整标记点大小
          const zoom = this.map.getZoom()
          // 在这里可以添加缩放效果
        })

      } catch (error) {
        console.error('地图初始化失败:', error)
      }
    },

    createInfoWindow(lot) {
      const ratio = lot.available / lot.total
      const content = `
        <div class="map-info-window">
          <h4>${lot.name}</h4>
          <p>总车位：${lot.total}</p>
          <p>空余车位：${lot.available}</p>
          <div class="progress-bar">
            <div class="progress" style="width: ${ratio * 100}%; background: ${this.getStatusColor(ratio)}"></div>
          </div>
        </div>
      `
      return new BMap.InfoWindow(content, {
        width: 200,
        height: 120,
        title: ''
      })
    },

    getStatusColor(ratio) {
      if (ratio > 0.3) return '#67C23A'
      if (ratio > 0.1) return '#E6A23C'
      return '#F56C6C'
    },

    // 切换2D/3D视图
    handleViewChange() {
      if (this.map) {
        this.map.clearOverlays(); // 清除所有覆盖物

        if (this.mapView === '3D') {
          // 3D 视图设置
          this.map.setMapType(BMAP_EARTH_MAP);      // 切换到地球模式
          this.map.setTilt(60);                     // 设置倾斜角度
          this.map.setHeading(30);                  // 设置旋转角度
          this.map.setZoom(19);                     // 设置缩放级别
          
          // 开启建筑物3D效果
          this.map.setDisplayOptions({
            building: true,                         // 显示3D建筑物
            point: true,                           // 显示兴趣点
            area: true                             // 显示区域面
          });

        } else {
          // 2D 视图设置
          this.map.setMapType(BMAP_NORMAL_MAP);     // 切换回普通地图
          this.map.setTilt(0);                      // 取消倾斜
          this.map.setHeading(0);                   // 取消旋转
          this.map.setZoom(17);                     // 调整缩放级别
          
          // 设置2D样式
          this.map.setMapStyle({
            style: 'midnight'                       // 使用暗色主题
          });
        }

        // 重新添加标记点
        this.parkingLots.forEach(lot => {
          const point = new BMap.Point(...lot.position);
          const marker = new BMap.Marker(point);
          
          // 3D模式下添加高度效果
          if (this.mapView === '3D') {
            const height = 50; // 标记点高度
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 添加跳动动画
            
            // 添加3D柱状标记
            const cylinder = new BMap.Cylinder(point, {
              fillColor: this.getStatusColor(lot.available / lot.total),
              fillOpacity: 0.6,
              strokeColor: this.getStatusColor(lot.available / lot.total),
              strokeOpacity: 0.8,
              strokeWeight: 1,
              height: height
            });
            this.map.addOverlay(cylinder);
          }
          
          this.map.addOverlay(marker);
          
          // 添加点击事件
          marker.addEventListener('click', () => {
            const infoWindow = this.createInfoWindow(lot);
            this.map.openInfoWindow(infoWindow, point);
          });
        });
      }
    },

    handleUsageTabChange(key) {
      this.currentUsageTab = key
    },
    refreshMonitor() {
      // 实现刷新监控列表的逻辑
    }
  },
  watch: {
    mapView: {
      handler: 'handleViewChange'
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: 100vh;
  background-color: #001529;
  padding: 20px;
  color: #fff;

  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      font-size: 24px;
      font-weight: bold;
      background: linear-gradient(to right, #00FFFF, #0066FF);
      -webkit-background-clip: text;
      color: transparent;
    }

    .time {
      font-size: 16px;
      color: #8392A5;
    }
  }

  .overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;

    .card {
      background: rgba(0, 40, 77, 0.8);
      border-radius: 8px;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-content {
        .card-value {
          font-size: 24px;
          font-weight: bold;
          color: #00FFFF;
          margin-bottom: 5px;
        }

        .card-title {
          color: #8392A5;
          font-size: 14px;
        }
      }

      .card-icon {
        width: 48px;
        height: 48px;
        background: rgba(0, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          font-size: 24px;
          color: #00FFFF;
        }
      }
    }
  }

  .main-content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    height: calc(100vh - 180px);
    overflow: hidden;

    .left-panel,
    .right-panel {
      display: flex;
      flex-direction: column;
      gap: 20px;
      height: 100%;
      overflow-y: auto;
    }

    .chart-card {
      background: rgba(0, 40, 77, 0.8);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;

      .card-header {
        font-size: 16px;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 4px solid #00FFFF;
      }

      .usage-chart,
      .income-chart {
        height: 300px;
      }
    }

    .map-container {
      height: calc(100vh - 180px);
      background: rgba(0, 40, 77, 0.8);
      border-radius: 8px;
      position: relative;

      .map-header {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0, 255, 255, 0.1);

        .title {
          font-size: 16px;
          font-weight: 500;
          color: #fff;
        }
      }

      .map-content {
        width: 100%;
        height: calc(100% - 50px);
        background: rgba(0, 20, 40, 0.8);
        border-radius: 0 0 8px 8px;
      }

      .map-overlay {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 280px;
        background: rgba(0, 20, 40, 0.8);
        backdrop-filter: blur(4px);
        padding: 15px;
        border-radius: 4px;
        border: 1px solid rgba(0, 255, 255, 0.1);
        z-index: 1000;

        .parking-status {
          .status-item {
            padding: 12px;
            border-bottom: 1px solid rgba(0, 255, 255, 0.1);
            
            &:last-child {
              border-bottom: none;
            }

            .status-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;

              .name {
                font-size: 16px;
                font-weight: 500;
                color: #fff;
              }
            }

            .status-info {
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;
              font-size: 13px;
              color: #8392A5;

              .available {
                color: #67C23A;
              }
            }

            ::v-deep .el-progress {
              margin-top: 8px;
              
              .el-progress-bar__outer {
                background-color: rgba(255, 255, 255, 0.1);
              }

              .progress-label {
                color: #fff;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }

  // 添加粒子动画
  .particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    // 漂浮粒子
    .floating-particles {
      position: absolute;
      width: 100%;
      height: 100%;

      .particle {
        position: absolute;
        background: radial-gradient(circle at center, 
          rgba(0, 255, 255, 0.8) 0%,
          rgba(0, 255, 255, 0) 100%
        );
        border-radius: 50%;
        animation: float-animation 8s infinite ease-in-out;

        @for $i from 1 through 80 {
          &:nth-child(#{$i}) {
            $size: random(4) + 2 + px;
            width: $size;
            height: $size;
            left: random(100) + vw;
            top: random(100) + vh;
            opacity: random(60) / 100;
            animation-delay: -$i * 0.15s;
            animation-duration: (random(8) + 6) + s;
          }
        }
      }
    }

    // 连线粒子
    .connected-particles {
      position: absolute;
      width: 100%;
      height: 100%;

      .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(0, 255, 255, 0.6);
        border-radius: 50%;
        
        &::before {
          content: '';
          position: absolute;
          width: 100px;
          height: 1px;
          background: linear-gradient(90deg, 
            rgba(0, 255, 255, 0.6),
            transparent
          );
          transform-origin: left;
        }

        @for $i from 1 through 30 {
          &:nth-child(#{$i}) {
            left: random(100) + vw;
            top: random(100) + vh;
            animation: connect-animation 12s infinite linear;
            animation-delay: -$i * 0.2s;
            
            &::before {
              transform: rotate(random(360) + deg);
            }
          }
        }
      }
    }

    // 流动粒子
    .flowing-particles {
      position: absolute;
      width: 100%;
      height: 100%;

      .particle {
        position: absolute;
        background: linear-gradient(
          135deg,
          rgba(0, 255, 255, 0.8),
          rgba(0, 128, 255, 0)
        );
        border-radius: 50%;
        filter: blur(1px);
        animation: flow-animation 15s infinite linear;

        @for $i from 1 through 40 {
          &:nth-child(#{$i}) {
            $size: random(6) + 3 + px;
            width: $size;
            height: $size;
            left: random(100) + vw;
            top: random(100) + vh;
            opacity: random(80) / 100;
            animation-delay: -$i * 0.3s;
            animation-duration: (random(10) + 8) + s;
          }
        }
      }
    }
  }

  // 装饰线动画
  .decoration-lines {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .line-h, .line-v {
      position: absolute;
      background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
      animation: line-scan 8s infinite linear;
    }

    .line-h {
      width: 100%;
      height: 1px;
      transform-origin: left;
    }

    .line-v {
      width: 1px;
      height: 100%;
      transform-origin: top;
    }
  }

  // 动态边框效果
  .border-box {
    position: relative;
    border: 1px solid rgba(0, 255, 255, 0.2);

    .border-corner-lt,
    .border-corner-rt,
    .border-corner-lb,
    .border-corner-rb {
      position: absolute;
      width: 10px;
      height: 10px;
      border-color: #00FFFF;
      border-style: solid;
      border-width: 2px;
    }

    .border-corner-lt {
      top: -2px;
      left: -2px;
      border-right: none;
      border-bottom: none;
    }

    .border-corner-rt {
      top: -2px;
      right: -2px;
      border-left: none;
      border-bottom: none;
    }

    .border-corner-lb {
      bottom: -2px;
      left: -2px;
      border-right: none;
      border-top: none;
    }

    .border-corner-rb {
      bottom: -2px;
      right: -2px;
      border-left: none;
      border-top: none;
    }
  }

  // 添加卡片动画
  .card {
    animation: card-in 0.8s ease-out backwards;
  }

  // 添加动态网格背景
  .grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    perspective: 1000px;

    .grid {
      width: 200%;
      height: 200%;
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      position: absolute;
      top: -50%;
      left: -50%;
      background-image: 
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
      animation: grid-move 20s linear infinite;
    }
  }

  // 添加光晕效果
  .glow-effects {
    position: fixed;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 2;

    .glow-circle {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(
        circle at center,
        rgba(0, 255, 255, 0.1) 0%,
        transparent 70%
      );
      animation: glow-move 10s ease-in-out infinite;
    }

    .glow-line {
      position: absolute;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg,
        transparent,
        rgba(0, 255, 255, 0.3),
        transparent
      );
      animation: line-flow 8s linear infinite;
    }
  }

  // 赛博朋克风格卡片
  .cyber-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, 
      rgba(0, 40, 77, 0.9) 0%,
      rgba(0, 20, 40, 0.9) 100%
    );
    border: 1px solid rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    animation: card-glow 2s ease-in-out infinite;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 255, 0.2),
        transparent
      );
      animation: shine 3s ease-in-out infinite;
      animation-delay: var(--delay);
    }

    &::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle at center,
        rgba(0, 255, 255, 0.1) 0%,
        transparent 60%
      );
      animation: pulse 4s ease-in-out infinite;
      animation-delay: var(--delay);
    }
  }

  // 添加地图相关样式
  .map-container {
    .map-content {
      width: 100%;
      height: 100%;
      min-height: 500px;
      background: rgba(0, 20, 40, 0.8);
      border-radius: 4px;
    }
  }

  // 信息窗口样式
  :deep(.map-info-window) {
    padding: 10px;
    color: #333;

    h4 {
      margin: 0 0 10px 0;
      color: #1890ff;
    }

    .progress-bar {
      width: 100%;
      height: 6px;
      background: #eee;
      border-radius: 3px;
      overflow: hidden;
      margin-top: 10px;

      .progress {
        height: 100%;
        transition: all 0.3s;
      }
    }
  }
}

@keyframes particle-animation {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(100vw, 100vh);
    opacity: 0;
  }
}

@keyframes line-scan {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes grid-move {
  0% {
    transform: rotateX(45deg) translateY(0);
  }
  100% {
    transform: rotateX(45deg) translateY(20px);
  }
}

@keyframes glow-move {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(50vw, 30vh);
  }
}

@keyframes line-flow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes shine {
  0% {
    transform: skewX(-45deg) translateX(-150%);
  }
  50% {
    transform: skewX(-45deg) translateX(150%);
  }
  100% {
    transform: skewX(-45deg) translateX(150%);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

@keyframes card-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
  }
}

@keyframes float-animation {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(20px, -20px);
  }
  50% {
    transform: translate(-10px, 30px);
  }
  75% {
    transform: translate(-25px, -15px);
  }
}

@keyframes connect-animation {
  0% {
    transform: rotate(0deg) translateX(50px);
  }
  100% {
    transform: rotate(360deg) translateX(50px);
  }
}

@keyframes flow-animation {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(-100vh) scale(1.5);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-200vh) scale(0.5);
    opacity: 0;
  }
}
</style>
